<template>
    <div class="column">
      <el-card class="box-card" shadow="hover">
        <div class="text item">
          <article v-for="(item, index) in tests" :key="index" class="media mt-3">
            <div class="media-content">
              <el-tooltip class="item" effect="dark" :content="item.name" placement="top">
                <a @click="goDetail(item)">
                  <span class="is-size-6">📰{{item.name}}</span>
                </a>
              </el-tooltip>
            </div>
          </article>
        </div>
      </el-card>
      <pagination
          v-show="page.total > 0"
          :total="page.total"
          :page.sync="page.current"
          :limit.sync="page.size"
          @pagination="init"
      />
    </div>
</template>

<script>
import {getTests} from "../../api/admin";
import Pagination from '@/components/Pagination'

export default {
  name: "TitleItem",
  components:{Pagination},
  data(){
    return{
      tests:[],
      page: {
        current: 1,
        size: 5,
        total: 0,
      },
    }
  },
  mounted() {
      this.init()
  },
  methods:{
    init(){
      getTests(this.page.current, this.page.size).then((response) => {
        const { data } = response
        this.page.current = data.current
        this.page.total = data.total
        this.page.size = data.size
        this.tests = data.records
      })
    },
    goDetail(item){
      let data=JSON.stringify(item)
      this.$router.push({name:'Test-detail',params:{item:data}})
    }
  }
}
</script>

<style scoped>
.columns{
  width:100%;
}
</style>